<style scoped>
.view-icons .active {
    background-color: #FF6575;
    border-color: #FF6575;
    color: #fff;
}

.view-icons a {
    align-items: center;
    background-color: #fff;
    border: 1px solid #D2DCEC;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    color: #000;
    display: inline-flex;
    font-size: 20px;
    justify-content: center;
    text-align: center;
    margin-right: 10px;
    width: 40px;
    height: 40px;
}
</style>
<template>


    <!-- 页面中的头部说明
    页面中的主题部分
      - 搜索区域
      - 列表区域
      - 翻页区域 -->
    <div class="">
        <div class="flex justify-between items-center">
            <div class="flex items-center">
                <div class="view-icons">
                    <a href="javascript:void(0);" class="grid-view active"><i class="feather-grid"></i></a>
                    <a href="javascript:void(0);" class="list-view"><i class="feather-list"></i></a>
                </div>
                <div class="show-result">
                    <p>显示 {{ total }} 中的 {{ 1 + (params.pageIndex - 1) * 10 }} ~ {{
                        (params.pageIndex - 1) * params.pageSize + list.length }} </p>
                </div>
            </div>
            <div>
                <slot name="search">xx</slot>
            </div>
        </div>

        <div v-if="loading"
            class="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 z-50">
            <div class="text-white text-2xl">Loading...</div>
        </div>


        <div v-if="cols == 4" class="my-4 grid grid-cols-4 gap-3">
            <div class v-for=" (item, index) in list" :key="index">
                <slot :item="item" :idx="index">
                    内容
                </slot>
            </div>
        </div>

        <div v-if="cols == 3" class="my-4 grid grid-cols-3 gap-3">
            <div class v-for=" (item, index) in list" :key="index">
                <slot :item="item" :idx="index">
                    内容
                </slot>
            </div>
        </div>


        <app-pagination :total="total" :current="params.pageIndex" @pageChange="pageChange" />

    </div>
</template>
<script setup>
import { onMounted } from 'vue';

const props = defineProps({
    opApi: {
        type: Object,
        required: true
    },
    cols: {
        type: Number,
        default: 4
    }
})
const list = ref([])
const total = ref(0)
const loading = ref(false)
const params = reactive({
    pageIndex: 1,
    pageSize: 10
})
const pageChange = async (e) => {
    params.pageIndex = e
    await search()
}

const del = async (e) => {
    await opApi.del(e)
    search()
    console.log(e)
}
const search = async () => {
    loading.value = true
    try {
        const res = await props.opApi.getList(params)
        list.value = res.list
        if ('total' in res) {

            total.value = res.total
        } else if ('pager' in res) {
            total.value = res.pager.total
        }

    } finally {
        loading.value = false
    }
}

onMounted(() => {
    search()
})

defineExpose({
    search
})

// const emit = defineEmits(['pageChange'])

</script>